<template>
	<!-- 猜你喜欢 -->
	<view class="caption" v-if="title">
		<text class="text">{{title}}</text>
	</view>
	<view class="guess">
		<navigator class="guess-item" v-for="(item,index) in goodses" :key="item.id"
			:url="`/pages/goods/goods?id=${item.id}`">
			<image class="image" mode="aspectFill" :src="getFirstImageUrl(item.imgUrl)"></image>
			<view class="name"> {{item.name}} </view>
			<view class="hot" v-if="item.oldPrice > 1000">本店热销量第{{index+1}}名</view>
			<view class="price">
				<text class="small">¥</text>
				<text>{{item.price}}.00</text>
				<text class="buy">{{item.sale}}人购买</text>
			</view>

		</navigator>
	</view>
	<view class="loading-text">{{ finish?'我已到底了':'正在加载...'}} </view>
</template>
<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, reactive, toRefs } from "vue";
	import { getGoodsApi } from "@/api/goods/index.ts";
	import type { GoodsVo, GoodsQuery } from '@/api/goods/types.ts';

	const finish = ref(false); //下拉刷新结束标记
	defineProps<{
		title : string
	}>()

	const data = reactive<GoodsQuery>({
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			cate1Id: '',
			cate2Id: '',
			cate3Id: '',
			}
		})
	const { queryParams } = toRefs(data)

	const goodses = ref<GoodsVo[]>([])
	/* 商品列表 */
	const getGoods = async () => {
		//如果内容已完全加载，就不再执行后面的逻辑
		if (finish.value === true) {
			return;
		}
		const res = await getGoodsApi(queryParams.value)
		console.log(res)
		//数组追加
		goodses.value.push(...res.rows)
		//加载条件判断
		if (res.rows.length > 0) {
			queryParams.value.pageNum++

		} else {
			finish.value = true;
		}
	}

	/*取第一张图片*/
	const getFirstImageUrl = (imageUrls : string) => {
		const image = imageUrls.split(',')
		return image.length > 0 ? image[0] : '';
	}
	/* 重置 */
	const reset = () => {
		queryParams.value.pageNum = 1;
		goodses.value = [];
		finish.value = false;

	}
	onLoad(() => {
		getGoods();
	})
	/* 暴露方法 */
	defineExpose({
		getGoods,
		reset
	})
</script>
<style lang="scss" scoped>
	:host {
		display: block;
	}

	/* 分类标题 */
	.caption {
		display: flex;
		justify-content: center;
		line-height: 1;
		padding: 36rpx 0 40rpx;
		font-size: 32rpx;
		color: #262626;

		.text {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 28rpx 0 30rpx;

			&::before,
			&::after {
				content: '';
				width: 20rpx;
				height: 20rpx;
				background-image: url(@/static/images/bubble.png);
				background-size: contain;
				margin: 0 10rpx;
			}
		}
	}

	/* 猜你喜欢 瀑布流模式*/
	.guess {
		column-count: 2; // 设置两列  
		column-gap: 10rpx; // 设置列间距  
		padding: 0 10rpx;

		.guess-item {
			break-inside: avoid; // 防止项目被分割到两列  
			width: 100%; // 宽度设置为100%，实际宽度会由列宽决定  
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: #fff;
			box-sizing: border-box; // 防止内边距和边框破坏布局  
		}

		.image {
			width: 360rpx;
			height: 360rpx;
			border-radius: 10rpx;
		}

		.name {
			padding: 0 20rpx;
			height: 35rpx;
			margin: 10rpx 0;
			font-size: 26rpx;
			color: #262626;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}

		.price {
			padding: 0 20rpx 20rpx;
			line-height: 1;
			padding-top: 4rpx;
			color: #cf4444;
			font-size: 26rpx;
		}

		.hot {
			padding: 0 10rpx 20rpx;
			font-size: 24rpx;
			color: #E5CCB8;
		}

		.small {
			font-size: 80%;
		}

		.buy {
			padding-left: 20rpx;
			font-size: 22rpx;
			color: #666;
		}
	}

	// 加载提示文字
	.loading-text {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		padding: 20rpx 0;
	}
</style>